<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default.html}">
<head>
    <title>表信息</title>
</head>
<body>
<section layout:fragment="wrapper">
    <form class="layui-form" th:object="${entity}" action="">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">数据源</label>
                    <div class="layui-input-block">
                        <select id="sourceId" name="sourceId" lay-verify="required"
                                class="layui-select"
                                lay-search lay-filter="sourceId">
                            <option value=""></option>
                            <option th:each="dataSource:${dataSources}"
                                    th:value="${dataSource.id}"
                                    th:text="${dataSource.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">表名</label>
                    <div class="layui-input-block">
                        <select name="tableName" id="tableName" lay-verify="required"
                                class="layui-select" lay-search lay-filter="tableName">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                        lay-filter="form-next">
                    <i class="layui-icon layui-icon-ok"></i>
                    下一步
                </button>
            </div>
        </div>
    </form>
    <script th:inline="javascript">
        layui.use(['form', 'jquery', 'button'], function () {
            let form = layui.form;
            let button = layui.button;
            let $ = layui.jquery;

            form.on('select(sourceId)', function (data) {
                if (!data.value) {
                    return;
                }
                // 加载表
                $.ajax({
                    url: '[(@{/genDatasource/expedition})]/' + data.value,
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    type: 'get',
                    success: function (result) {
                        if (result.code === '20000') {
                            let data = result.data || [];
                            let element = '<option value=""></option>';
                            for (let i = 0; i < data.length; i++) {
                                element += '<option value="' + data[i] + '">' + data[i] + '</option>';
                            }
                            let $tableName = $("#tableName");
                            $tableName.empty();
                            $tableName.append(element);
                            // 刷新select
                            layui.form.render("select");
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                });
            });

            form.on('submit(form-next)', function (data) {
                // 防止重复提交
                button.load({
                    elem: '[lay-submit]',
                    time: 2000,
                    done: function() {
                    }
                })

                let sourceId = data.field.sourceId;
                let tableName = data.field.tableName;
                // let sourceId = $("select[name='sourceId'] option:selected").val();
                // let tableName = $("select[name='tableName'] option:selected").val();
                // 获取当前index
                let frameIndex = parent.layer.getFrameIndex(window.name);
                let index = parent.layer.open({
                    type: 2,
                    title: '表信息',
                    shade: 0.1,
                    maxmin: true,
                    area: ['900px', '600px'],
                    content: '[(@{/genTableInfo/form})]?sourceId=' + sourceId + '&tableName=' + tableName,
                    success: function (layero, index) {
                    }
                });
                parent.layer.full(index);
                parent.layer.close(frameIndex);
                return false;
            });
        })
    </script>
</section>
</body>
</html>
